---
const {articleSizeExp}=Astro.props
---
<div id="default-carousel" class="relative w-full" data-carousel="slide">
  <!-- Carousel wrapper -->
  <div  class="relative max-lg:h-96 overflow-hidden rounded-lg h-screen">

    <slot />

    <!-- Slider indicators -->
    <div
      class="absolute z-30 bottom-7 flex -translate-x-1/2 left-1/2 space-x-3 rtl:space-x-reverse"
    >
      <button th:each={articleSizeExp}
        class="w-3 h-3 rounded-full"
        aria-current="true"
        aria-label="Slide 1"
        th:data-carousel-slide-to="${itemDot}"
        data-carousel-slide-to="0"></button>
  </div>
</div>

<script> 
import { Carousel } from 'flowbite';

</script>
